*{
    margin: 0;
    padding: 0;
}
body{
    background: url(../images/bj.png) no-repeat;
    height: 900px;
    position: relative;
}
@font-face{
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?7kkyc2');
    src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
}

.logo{
    width: 240px;
    height: 40px;
    position: absolute;
    top: 32px;
    left: 40px;
}
.logo img{
    width: 100%;
    height: 100%;
}
.main{
    width: 1000px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.main .leftBox{
    float: left;  
    position: relative;
    width: 60%;
    height: 100%;
    color: #fff;
    background-color:rgba(0, 0, 0, .3);
    text-align: center;
    
    
}

.main .leftBox h1{
    margin: 180px auto 0;
    letter-spacing:3px;
}
.main .leftBox p{
    margin: 20px auto 0;
    letter-spacing:3px;
}


.main .rightBox{
    float: left;
    width: 40%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 40px 30px;
    
}

.rightBox span{
    font-family: 'icomoon';
}
.main .rightBox h2{
    text-align: center;
    letter-spacing:3px;
}
.rightBox .w{
    margin-top: 40px;
}
.rightBox .w input{
    display: block;
    width: 100%;
    height: 30px;
    border: none;
    border-bottom: 1px solid #f2f3f6;
    outline:medium;
    padding-left: 25px ;
    box-sizing: border-box;
}
.rightBox .login input{
    display: block;
    width: 100%;
    height: 40px;
    border: none;
    margin-top: 40px;
    text-align: center;
    border-radius: 29px;
    background-color: #409eff;
    cursor: pointer;
}

.accounts,.password,.captcha,.domainName{
    position: relative;
}
.accounts span{
    position: absolute;
    top: 4px;
    left: 0;
}
.password span{
    position: absolute;
    top: 4px;
    left: 0;
}


.accounts input:focus{
    border-bottom: 1px solid #f56c6c;
}



.password input:focus{
    border-bottom: 1px solid #f56c6c;
}

.password span::after{
    content: '';
    position: absolute;
    top: 4px;
    right: -333px;  
}
.password input:focus{
    display: block;
}

.zhmm {
    font-size: 13px;
    color: #f56c6c;
    display: none;
}

.zhmms:focus .zhmm{
    display: block;
}
.captcha span {
    position: absolute;
    top: 4px;
    left: 0;
}
.captcha input{
    width: 70% !important;
}
.captcha{
    position: relative;
}
.captcha img{
    position: absolute;
    width: 100px;
    height: 40;
    top: -5px;
    right: 0;
}

.domainName span {
    position: absolute;
    top: 4px;
    left: 0;
}
.rightBox .login input:hover{
    opacity: .7;
}

.footer{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform:translateX(-50%);
}

.father{
    width: 100%;
    position: absolute;
    bottom: 0;
    
}
.father p{
    margin-bottom: 10px;
    color: #cdccce;
    font-size: 18px;
}
